<template>
    <div id="category">
        <nav-bar class="nav-bar"><div slot="center">商品分类</div></nav-bar>
        <div class="content">
            <tab-menu :categories="categories"
                      @selectItem="selectItem"/>
                <scroll id="tab-content"
                        :probe-type="3"
                        @scroll="contentScroll"
                        ref="scroll">
                    <div>
                        <tab-content-category :subcategories="showSubcategory"/>
                        <tab-control :titles="['综合','新品','销量']"
                                     @itemClick='tabClick'
                                     ref="tabcontrol1"
                                     class="tab-control1"/>
                        <goods-list :goods="showCategoryDetail"></goods-list>
                    </div>
                </scroll>
        </div>
    </div>
</template>

<script>
    import NavBar from "components/common/navbar/NavBar";
    import TabMenu from "./childComps/TabMenu";
    import TabContentCategory from "./childComps/TabContentCategory";
    import Scroll from "components/common/scroll/Scroll";
    import TabControl from "components/content/tabControl/TabControl";
    import GoodsList from "components/content/goods/GoodsList";

    import {getCategory,getSubcategory,getCategoryDetail} from "network/category";
    import GridView from "../../components/common/gridView/GridView";

    export default {
        name: "Category",
        components:{
            GridView,
            GoodsList,
            TabControl,
            Scroll,
            NavBar,
            TabMenu,
            TabContentCategory
        },
        data(){
            return{
                categories:[],
                categoryData:{},
                currentIndex:-1,
                currentType:'pop',
                tabOffsetTop:0,
                isTabFixed:false
            }
        },
        computed:{
            showSubcategory(){
                if(this.currentIndex===-1) return {}
                return this.categoryData[this.currentIndex].subcategories
            },
            showCategoryDetail(){
                if(this.currentIndex===-1) return []
                return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
            }
        },
        created() {
            //请求分类数据
            this._getCategory()
        },
        methods:{
            _getCategory(){
                getCategory().then((res)=>{
                    // this.categories=res.data.category.list
                    // console.log(categories);
                    //获取请求数据
                    this.categories = res.data.category.list
                    // console.log(res);
                    // console.log(this.categories)
                    //初始化每个类别的子数据
                    for(let i=0;i<this.categories.length;i++){
                        this.categoryData[i]={
                            subcategories:{},
                            categoryDetail:{
                                'pop':[],
                                'new':[],
                                'sell':[]
                            }
                        }
                    }
                    //请求第一个分类的数据
                    this._getSubcategories(0)
                })
            },
            _getSubcategories(index){
                this.currentIndex=index;
                const mailKey=this.categories[index].maitKey;
                getSubcategory(mailKey).then(res=>{
                    // console.log(res);
                    this.categoryData[index].subcategories=res.data
                    this.categoryData={...this.categoryData}
                    //'pop','new','sell'三条里面的数据相同
                    this._getCategoryDetail('pop')
                    this._getCategoryDetail('new')
                    this._getCategoryDetail('sell')
                })
            },
            _getCategoryDetail(type){
                //获取请求的miniWallkey
                const miniWallkey=this.categories[this.currentIndex].miniWallkey;
                //发送请求，获取详细数据
                getCategoryDetail(miniWallkey,type).then(res=>{
                    //将获取的数据保存下来
                    console.log(res);
                    this.categoryData[this.currentIndex].categoryDetail[type]=res;
                    this.categoryData={...this.categoryData}
                })
            },
            selectItem(index){
                this._getSubcategories(index)
            },
            tabClick(index){
                switch (index) {
                    case 0:
                        this.currentType='pop'
                        break
                    case 1:
                        this.currentType='new'
                        break
                    case 2:
                        this.currentType='sell'
                        break
                }
                this.$refs.tabcontrol1.currentIndex=index;
                this.$refs.tabcontrol2.currentIndex=index;
            },
            contentScroll(position){
                // console.log(position);
                this.tabOffsetTop=this.$refs.tabcontrol1.$el.offsetTop;
                // console.log(this.tabOffsetTop);
                // if((-position.y)>this.tabOffsetTop){
                //     this.isTabFixed=true;
                // }
                this.isTabFixed=(-position.y)>this.tabOffsetTop?true:false;
            }

        }
    }
</script>

<style scoped>
    /*#category{*/
    /*    height: 100vh;*/
    /*}*/
    /*.nav-bar{*/
    /*    background-color: var(--color-tint);*/
    /*    font-weight: 700;*/
    /*    color: #fff;*/
    /*}*/
    /*.content {*/
    /*    position: absolute;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    top: 44px;*/
    /*    bottom: 49px;*/
    /*    display: flex;*/
    /*    !*overflow: hidden;*!*/
    /*}*/
    /*#tab-content{*/
    /*    height: 100%;*/
    /*    flex: 1;*/
    /*}*/
    #category {
        height: 100vh;
    }

    .nav-bar {
        background-color: var(--color-tint);
        font-weight: 700;
        color: #fff;
    }

    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 44px;
        bottom: 49px;

        display: flex;
        overflow: hidden;
    }

    #tab-content {
        height: 100%;
        flex: 1;
    }
    /*.tab-control2{*/
    /*    position: fixed;*/
    /*    top: 0;*/
    /*    !*z-index: 9;*!*/
    /*}*/




</style>

